<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<template #header>
				<div class="flex-startCenter">
					<p class="mr20 card-title">今日统计</p>
					<el-radio-group v-model="state.status">
						<el-radio-button :label="1">全部</el-radio-button>
						<el-radio-button :label="2">直营</el-radio-button>
						<el-radio-button :label="3">加盟</el-radio-button>
					</el-radio-group>
				</div>
			</template>
			<grid-layout v-model:layout="state.layouts" :col-num="6" :row-height="90"
				:is-draggable="true" :is-resizable="false" :is-mirrored="false"
				:vertical-compact="true" :margin="[15, 15]" :use-css-transforms="true">
				<grid-item v-for="(item,index) in state.layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="index">
					<div class="flex-warp-item-box" :class="`home-animation${index}`">
						<section>
							<i :class="item.icon" :style="{ color: item.iconColor }"></i>
						</section>
						<section class="flex-justify-cente">
							<span class="pl5">{{ item.i }}</span>
							<section class="mt15">
								<i class="iconfont icon-yangan" :style="{ color: item.iconColor }"></i>
							</section>
						</section>
					</div>
				</grid-item>
			</grid-layout>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive } from 'vue';

// 定义变量内容
const state = reactive({
	status:1,
	layouts: [
		{ x: 0, y: 0, w: 1, h: 1, i: '0', icon: 'iconfont icon-yangan', value: '营业额', iconColor: '#F72B3F', tip: '门店今日全部的收入总和，包含销售、充值、还款的收入（不包含代金券、积分抵扣、赠送金额及不统计营收的支付方式所支付的金额）。'},
		{ x: 1, y: 0, w: 1, h: 1, i: '1', icon: 'iconfont icon-yangan', value: '划卡业绩', iconColor: '#F72B3F', tip: '门店今日使用储值卡支付（抵扣）商品的金额总和。' },
		{ x: 2, y: 0, w: 1, h: 1, i: '2', icon: 'iconfont icon-yangan', value: '消耗业绩', iconColor: '#F72B3F', tip: '门店今日服务消耗的总金额。（消耗业绩计算公式：购买卡项总金额/购买总次数*服务扣卡数量=卡项消耗金额）。'  },
		{ x: 3, y: 0, w: 1, h: 1, i: '3', icon: 'iconfont icon-yangan', value: '退款', iconColor: '#F72B3F', tip: '总部今日同意门店的退款申请，且退款方式为现金的金额（不包含退款到会员卡余额的金额）。'  },
		{ x: 4, y: 0, w: 1, h: 1, i: '4', icon: 'iconfont icon-yangan', value: '新增会员', iconColor: '#F72B3F', tip: '门店今日新增新会员的数量总和。'  },
		{ x: 0, y: 2, w: 1, h: 1, i: '5', icon: 'iconfont icon-yangan', value: '服务项目', iconColor: '#F72B3F', tip: '门店今日服务的卡项数量总和。'  },
		{ x: 1, y: 2, w: 1, h: 1, i: '6', icon: 'iconfont icon-yangan', value: '服务客流', iconColor: '#F72B3F', tip: '门店今日使用储值卡支付（抵扣）商品的金额总和。'  },
		{ x: 2, y: 2, w: 1, h: 1, i: '7', icon: 'iconfont icon-yangan', value: '预约项目', iconColor: '#F72B3F', tip: '门店今日产生服务的客户数量。'  },
		{ x: 3, y: 2, w: 1, h: 1, i: '8', icon: 'iconfont icon-yangan', value: '预约客流', iconColor: '#F72B3F', tip: '门店今日预约的客流人数总和。'  },
		{ x: 4, y: 2, w: 1, h: 1, i: '9', icon: 'iconfont icon-yangan', value: '应赴约客流', iconColor: '#F72B3F', tip: '门店之前预约需今日到店的客流人数总和。'  },
		{ x: 5, y: 0, w: 1, h: 2, i: '10', icon: 'iconfont icon-yangan', value: '收银方式', iconColor: '#F72B3F', tip: '门店之前预约需今日到店的客流人数总和。'  },
	],
});

</script>

<style scoped lang="scss">
.grid-layout-container {
	.vue-grid-item {
		color: var(--el-color-white);
	}
	.flex-warp-item-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		color: var(--el-text-color-primary);
		height: 90px;
		height: 100%;
		border-radius: 5px;
		background: var(--next-bg-color);
		cursor: pointer;
		transition: all 0.3s ease;
		&:hover {
			background: var(--el-color-primary-light-9);
			transition: all 0.3s ease;
		}
	}
	.box-card :deep(.el-card__header){
		padding: 10px 20px !important;
	}
	.box-card :deep(.el-card__body){
		padding: 10px !important;
	}

	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	
}

.card-title {
		position: relative;
		padding-left: 10px;
		line-height: 24px;
		color: var(--el-text-color-regular);
		&::after {
			content: '';
			width: 4px;
			height: 20px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
</style>
